<template>
  <a-select :value="props.value" @change="innerValue = $event">
    <a-select-option
      v-for="item in selectState.selectList"
      :key="item[displayConfig.name]"
      :value="item[displayConfig.name]"
      >{{ item[displayConfig.value] }}
    </a-select-option>
  </a-select>
</template>

<script setup lang="ts">
import { computed, reactive, watch } from "vue";
import config, { Bean } from "@/utils/interfaceConfig";
import { useStore } from "vuex";

const store = useStore();
const props = defineProps<{
  name: string;
  value: string | number | Array<number>;
}>();
const emits = defineEmits(["update:value", "change"]);

let selectState: {
  selectList: [];
} = reactive({
  selectList: [],
});
const displayConfig = computed<Bean>(() => config[props.name || "default"]);

const innerValue = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
    emits(
      "change",
      selectState.selectList.find((r) => val === r[displayConfig.value.name])
    );
  },
});
watch(
  () => props.name,
  (name) => {
    if (name) {
      store.dispatch("getList", name).then((res) => {
        selectState.selectList = res;
      });
    }
  },
  {
    immediate: true,
  }
);
</script>

<style scoped></style>
